<template>
  <div class="login_tc">
    <el-row class="login_pc hidden-xs-only">
      <h1>
        <p class="cname">中英智慧教育学生测评系统</p>
        <!-- <p class="uname">EduTech China student evaluation system</p> -->
      </h1>
      <div class="loginform">
        <img
          style="position: absolute;right:-51px;top:-39px;z-index:1;"
          src="@/assets/images/login/rocket.png"
          alt
        />
        <div class="formleft">
          <img src="@/assets/images/login/logo.png" alt  style="width:90%"/>
          <img style="margin-top:127px" src="@/assets/images/login/t_login.png" alt />
        </div>
        <div class="formright">
          <div></div>
          <p class="title">
            导师登录
            <img src="@/assets/images/login/tright.png" alt />
          </p>
          <div class="name box">
            <img src="@/assets/images/login/user.png" alt />
            <el-input v-model="name" placeholder="请输入帐号"  maxlength='11'></el-input>
          </div>
          <div class="password box">
            <img src="@/assets/images/login/password.png" alt />
            <el-input type="password" v-model="password" placeholder="请输入密码"></el-input>
          </div>
          <div style="text-align:right;">
            <router-link style="color:#253172" :to="{name:'EditPassword',query:{type:'2',person:'teacher'}}">忘记密码？</router-link>
          </div>
          <div class="gwset">
            <div class="btn_login" @click="tlogin()">登录</div>
            <div class="btn_backGW1" @click="openGW()">访问官网</div>
          </div>
        </div>
      </div>
    </el-row>
    <el-row class="login_wap hidden-sm-and-up">
      <div class="headerbg">
        <p>导师登录</p>
        <img src="@/assets/images/login/waplogin.png" alt />
      </div>
      <div class="loginbox">
        <div class="logo">
          <img src="@/assets/images/login/logo.png" alt />
        </div>
        <div class="logintype">
          <span class="mcolor">导师登录</span>
        </div>
        <div style="margin-top: 0.9rem;">
          <div class="name box">
            <img src="@/assets/images/login/user.png" alt />
            <el-input v-model="name" placeholder="请输入帐号"  maxlength='11'></el-input>
          </div>
          <div class="password box">
            <img src="@/assets/images/login/password.png" alt />
            <el-input type="password" v-model="password" placeholder="请输入密码"></el-input>
          </div>
          <div style="text-align:right;">
            <router-link style="color:#253172" :to="{name:'EditPassword',query:{type:'2',person:'teacher'}}">忘记密码？</router-link>
          </div>
          <div class="btn_login" @click="tlogin()">登录</div>
        </div>
      </div>
      <div @click="openGW()" class="btn_backGW">访问官网</div>
    </el-row>
  </div>
</template>

<script>
/**
 * 导师登陆页
 */
export default {
  name: "Index",
  data() {
    return {
      name: "", //导师登录用户名
      password: "" //密码
    };
  },
  methods: {
    tlogin() {
      if (!this.name) {
        this.$message({
          offset: "400",
          message: "请输入账号",
          showClose: true
        });
        return false;
      }
      if (!this.password) {
        this.$message({
          offset: "400",
          message: "请输入密码",
          showClose: true
        });
        return false;
      }
      this.$api
        .post("/auth/teacher", {
          login_username: this.name,
          login_password: this.password
        })
        .then(res => {
          if (res.data.code == 1) {
            localStorage.setItem("FL_TOKEN", res.data.data.token);
            localStorage.setItem("FL_login", "1");
            this.$msgbox({
              confirmButtonClass: "msgbox-btn-long",
              title: "填写须知",
              message: `您已成功登陆中英智慧教育学生评测系统，请确保您填写的信息准确无误，以便学生成绩的准确，谢谢您的配合！`,
              confirmButtonText: "确定",
              callback: (action, instance) => {
                if (action === "confirm") {
                  this.$router.push({ name: "Teacher" });
                }
              }
            });
          } else {
            this.$message({
              offset: "400",
              message: res.data.message,
              showClose: true
            });
          }
        });
    },
    openGW(){
      window.location.href = "http://www.edutechchina.com/"
    }
  },
  created() {
    history.pushState(null,null,document.URL);
    window.addEventListener("popstate", function(e) { 
      history.pushState(null,null,document.URL);
    }, false);
  }
};
</script>

<style lang="less">
.msgbox-btn-long {
  width: 100% !important;
  padding: 0 20px;
  // font-size: 10px !impo;
}

.confirmButton{
  font-size: 20px;
}
.login_tc {
  .login_pc {
    background: url("../../assets/images/login/loginbg.png") no-repeat center;
    background-size: 100% 100%;
    height: 100vh;
    position: relative;
    h1 {
      padding-top: 41px;
      padding-left: 68px;
      .cname {
        width: 583px;
        text-align: justify;
        text-align-last: justify;
        font-size: 48px;
        font-weight: bold;
        font-family: PingFang SC;
        color: rgba(255, 255, 255, 1);
      }
      .uname {
        width: 583px;
        text-align: justify;
        text-align-last: justify;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
      }
    }
    .loginform {
      width: 1013px;
      height: 638px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 6px 95px 0px rgba(0, 0, 0, 0.21);
      border-radius: 30px;
      margin: 0 auto;
      margin-top: 106px;
      position: relative;
      box-sizing: border-box;
      padding: 34px 45px;
      .formleft {
        width: 381px;
        float: left;
      }
      .formright {
        float: right;
        width: 483px;
        text-align: center;
        .title {
          font-size: 30px;
          margin-top: 46px;
          margin-bottom: 55px;
        }
        .box {
          display: flex;
          width: 483px;
          height: 60px;
          background: rgba(248, 248, 248, 1);
          align-items: center;
          margin-bottom: 24px;
          img {
            width: 25px;
            height: 30px;
            margin-left: 20px;
          }
          input {
            border: none !important;
            background: rgba(248, 248, 248, 1) !important;
          }
        }
        .btn_login {
          cursor: pointer;
          margin-top: 114px;
          color: white;
          font-size: 30px;
          font-weight: 400;
          text-align: center;
          line-height: 80px;
          width: 500px;
          height: 87px;
          background: url("../../assets/images/login/loginbtn.png") no-repeat
            center;
          background-size: 100% 100%;
        }
      }
    }
  }
  .login_wap {
    position: relative;
    .headerbg {
      overflow: hidden;
      p {
        line-height: 40px;
        position: absolute;
        font-size: 20px;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        width: 100%;
      }
      img {
        width: 100%;
      }
    }
    .loginbox {
      position: relative;
      margin: -1.2rem auto;
      width: 6.65rem;
      height: 7.16rem;
      box-shadow: 0px 6px 95px 0px rgba(0, 0, 0, 0.21);
      background: white;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 0.24rem 0.32rem;
      .logo {
        width: 1.9rem;
        img {
          width: 100%;
        }
      }
      .logintype {
        margin-top: 0.56rem;
        font-size: 0.36rem;
        font-weight: bold;
        display: flex;
        justify-content: space-around;
        .mcolor {
          color: #253172;
        }
      }
    }
    .box {
      display: flex;
      width: 6rem;
      align-items: center;
      margin-bottom: 24px;
      border-bottom: 1px solid #dbdbdb;
      img {
        width: 0.31rem;
        height: 0.34rem;
        margin-left: 20px;
      }
      input {
        border: none !important;
        background: #fff !important;
      }
    }
    .btn_login {
      margin: 0.8rem auto 0;
      width: 4.83rem;
      height: 0.7rem;
      line-height: 0.7rem;
      background: rgba(37, 49, 114, 1);
      box-shadow: 0px 6px 9px 0px rgba(26, 57, 179, 0.32);
      border-radius: 35px;
      text-align: center;
      font-size: 0.3rem;
      color: #fff;
    }
  }
}

.el-message-box .el-message-box__btns .el-button--primary{
  background: rgba(37, 49, 114, 1) !important;
}
.el-message-box .el-message-box__content{
  font-size: 0.26rem;
}

.btn_backGW{
  margin: 0.8rem auto 0;
  width: 4.83rem;
  height: 0.7rem;
  line-height: 0.7rem;
  background: #ffffff;
  // box-shadow: 0px 6px 9px 0px rgba(26, 57, 179, 0.32);
  border-radius: 35px;
  border: 1px solid rgba(26, 57, 179, 0.7);
  text-align: center;
  font-size: 0.3rem;
  color: rgba(26, 57, 179, 0.7);
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.gwset{
  display: flex;
  justify-content: space-between;
  .btn_login{
    height: 67px !important;
    background: rgba(37, 49, 114, 1) !important;
    box-shadow: 0px 6px 9px 0px rgba(26, 57, 179, 0.32) !important;
    width: 250px !important;
    border-radius: 44px;
    line-height: 67px !important;
    margin-top: 43px !important;
  }
  .btn_backGW1{
    cursor: pointer;
    margin-top: 43px;
    color: rgba(37, 49, 114, 0.7);
    font-size: 30px;
    font-weight: 400;
    text-align: center;
    line-height: 67px;
    width: 200px;
    height: 67px;
    border-radius: 44px;
    border: 1px solid rgba(26, 57, 179, 0.7);
  }
}
</style>
